<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="myinp" /><button>点击我</button>
    <ul>
       
    </ul>
    <script>
        // 1.js通过input框获取值；
        var inpEle = document.querySelector(".myinp");
        var btn = document.querySelector("button");
        var ulEle = document.querySelector("ul");
        btn.onclick = function(){
          var val =   inpEle.value;
        //   console.log(val);
          var liStr = `<li>${val}<button>删除</button></li>`;
          ulEle.innerHTML += liStr;

          var delEles = document.querySelectorAll("ul button");
        //   console.log(delEles)
            for(let i=0;i<delEles.length;i++){
                delEles[i].onclick = function(){
                    // console.log("点击了删除按钮",this);
                    // js里获取父级元素parentNode ,删除指定元素 remove();
                //   console.log(  );
                  this.parentNode.remove();
                }
            }
        }

        // 1.准备几个图片，实现点击按钮随机将一个盒子的背景随机切换到几个图片中的一个
        // 2.tab选项卡；
        // 3.学员系统  1完成添加功能   2.删除功能；
    </script>
</body>
</html>